<template>
	<div class="c-form">
		<el-dialog :visible="visible" :title="title" :width="width" :show-close="false">
			<el-form :model="form" ref="d-form" label-width="100px" class="demo-ruleForm">
				<el-row>
					<el-col :span="item.span||20" v-for="(item,index) in items" :key="index"
						v-show="item.hidden?!item.hidden():true">
						<el-form-item :label="item.label" :prop="item.prop"
							:rules="(item.hidden&&item.hidden())?null:item.rules">
							<el-tooltip :disabled="!item.tip" effect="dark" :content="item.tip" placement="top">
								<slot v-if="item.type==='slot'" :name="item.prop" :form="form"></slot>
								<el-component v-else v-model="form[item.prop]" :type="item.type" :on="item.on||{}"
									:attrs="item.attrs || {}" :options="item.options || []" :disabled="item.disabled?item.disabled():false"></el-component>
							</el-tooltip>
						</el-form-item>
					</el-col>
					<slot></slot>
				</el-row>
				<el-row>
					<el-form-item>
						<el-button type="primary" size="small" @click="onSubmit">确 定</el-button>
						<el-button size="small" @click="onCancel">取 消</el-button>
					</el-form-item>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	// 验证器文档地址:https://github.com/yiminghe/async-validator
	import elComponent from './lib/el-component.js';
	export default {
		components: {
			elComponent
		},
		name: 'el-dialog-form',
		// model: {
		// 	prop: 'visible'
		// },
		props: {
			// 是否显示dialog
			visible: {
				type: Boolean,
				default: false
			},
			// 标题
			title: {
				type: String,
				default: ""
			},
			// 宽度
			width: {
				type: String,
				default: ""
			},
			// 表单项
			items: {
				type: Array,
				default: []
			},
			// 表单值
			form: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		methods: {
			onSubmit() {
				this.$refs['d-form'].validate((valid) => {
					if (valid) {
						this.$emit('submit', this.form);
					}
				})
			},
			onCancel() {
				this.$emit('update:visible', false);
				this.$emit('cancel');
			},
			close() {
				this.$emit('update:visible', false);
			},
		}
	}
</script>

<style>
	.el-form-item {
		margin-bottom: 15px !important;
	}
</style>
